<template>
  <Editor v-model="state" :formData="formData" :customProps="customProps"></Editor>

  <div class="show-text">
    {{ "formData:" + JSON.stringify(formData) }}
  </div>
</template>

<script setup>
import data from "./data.json";
import { provide, reactive, ref } from "vue";
import Editor from "./components/editor";
import { registerConfig } from "./utils/editor-config";
import { ElMessage } from "element-plus";
import { $$tablePropAdd } from "./components/tableAdd";
import axios from "axios";
import { events } from "./components/events";

const state = ref(data);

const formData = reactive({
  username: "admin",
});

// 添加下拉框事件处理函数
const customProps = {
  // 组件标识 对应data中slotName
  mySelect: {
    onChange: (val) => {
      ElMessage({
        message: `下拉框数据变化：${val}`,
      });
    },
  },
  // 表格事件
  tableAdd: {
    clickFn: {
      onClick: async (val) => {
        const data = await $$tablePropAdd({});
      },
    },
    deleteFn: async (id) => {
      const data = await axios.delete("http://localhost:8010/api/user/delete/" + id);
      if (data && data.status === 200) {
        events.emit("refresh");
        ElMessage({
          message: "删除成功",
        });
      } else {
        ElMessage({
          message: "删除失败, 请联系管理员",
        });
      }
    },
  },
};

// 注册为全局对象
provide("config", registerConfig);
</script>

<style lang="scss">
#app {
  position: fixed;
  inset: 20px;
}
.show-text {
  position: absolute;
  text-align: center;
  width: 100%;
  bottom: 200px;
}
</style>
